<template>
	<view class="class">
		<u-navbar ref="navbar" :border-bottom="false" title="续费预警"></u-navbar>
		<view class="part02 container acea-row row-column">
			<view class="header acea-row row-middle row-between">
				<u-search class="search" v-model="keywords" :clearabled="true" placeholder="搜索学员手机号或者姓名" :show-action="false" @search="search"></u-search>
				<view class="filter acea-row row-middle">
					<text>筛选</text>
					<image src="../../../static/images/student-filter.png" mode=""></image>
				</view>
				<u-dropdown :style="'z-index: '+quekeList.dropdownZIndex+';'" ref="uDropdown" class="dropdown" @open="dropdownOpen" @close="dropdownClose">
					<u-dropdown-item>
						<view class="dropdown-content">
							<scroll-view scroll-y class="content">
								<!-- <view class="item acea-row row-column">
									<view class="title">班级(可多选)</view>
									<view class="checkbox acea-row">
										<view class="checkbox-item" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in quekeList.checkboxList" :key="index" @click="checkboxHandle1(item.id,1)">
											{{item.title}}
										</view>
									</view>
								</view>
								<view class="item acea-row row-column">
									<view class="title">缺课时间</view>
									<view class="inputView acea-row row-middle row-between">
										<u-input v-model="quekeList.classTimeMin" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最短课时" input-align="center" :type="text" :border="false" />
										<text class="xian">-</text>
										<u-input v-model="quekeList.classTimeMax" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最长课时" input-align="center" :type="text" :border="false" />
									</view>
								</view> -->
								<view class="item acea-row row-column">
									<view class="title">类型</view>
									<view class="checkbox acea-row">
										<view class="checkbox-item" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in quekeList.reason" :key="index" @click="checkboxHandle1(item.id,2)">
											{{item.title}}
										</view>
									</view>
								</view>
								<view class="item acea-row row-column">
									<view class="title">排序</view>
									<view class="checkbox acea-row">
										<view class="checkbox-item" :class="item.isCheck?'checkbox-item-active':''" v-for="(item,index) in quekeList.buke" :key="index" @click="checkboxHandle1(item.id,3)">
											{{item.title}}
										</view>
									</view>
								</view>
								<view class="item acea-row row-column">
									<view class="title">剩余{{cxType==1?'课时':'天数'}}</view>
									<view class="inputView acea-row row-middle row-between">
										<u-input v-model="quekeList.num" :showClearIcon="false" :custom-style="{backgroundColor:'#f7f8fa'}" placeholder="最短课时" input-align="center" :type="text" :border="false" />
									</view>
								</view>
							</scroll-view>
							<view class="footer acea-row row-middle">
								<view class="btn btn1" @click="reset">清空</view>
								<view class="btn btn2" @click="confirm">完成</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view :style="'height:100vh;z-index: '+listZIndex+';'"  v-if="list.length!=0"> 
				<view style="background-color: #f7f8fa;padding-bottom: 32rpx;">
					<view class="list acea-row row-column">
						<view class="item acea-row row-column" v-for="(item,index) in list" :key="index" @click="showModal(item)">
							<view class="line01 acea-row row-middle row-between">
								<text>{{item.kc_name}}</text>
								<text>剩余{{item.type==1?item.diff_num+'课时':item.diff_day+'天'}}</text>
							</view>
							<view class="line02 acea-row row-middle row-between">
								<text>{{item.stu_name}}</text>
								<text>{{item.tz_time?item.tz_time+' 已提醒':'未提醒'}}</text>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" style="margin-top: 32rpx;display: block;" />
				</view>
			</view>
			<u-empty text="暂无数据" mode="list" v-else margin-top="32"></u-empty>
		</view>
		<view style="height: 10rpx;"></view>
		<u-modal v-model="modal" content="请选择续费提醒方式" title="续费提醒" confirm-text="发送通知" cancel-text="电话通知" @confirm="fsConfirm" @cancel="cancel" show-cancel-button mask-close-able></u-modal>
	</view>
</template>

<script>
	import common from '../../../api/common.js'
	import request from '../../../api/request.js'
	export default {
		data(){
			return{
				common,
				status:'loadmore',
				list: [],
				page: 1,
				limit:10,
				keywords:'',
				partLessHeight:0,
				modal:false,
				canTabChange:true,
				checkData:{}, // 选择项参数
				cxType:1, //查询时的类型
				tabList:[{
					name: '点名记录'
				}, {
					name: '缺课补课'
				},{
					name: '请假申请'
				}],
				quekeList:{
					checkboxList:[{id:1,title:'英语一班',isCheck:false},
								{id:2,title:'英语二班',isCheck:false},
								{id:3,title:'英语三班',isCheck:false},
								{id:4,title:'英语四班',isCheck:false},
								{id:5,title:'英语五班',isCheck:false},
								{id:6,title:'英语六班',isCheck:false},
								{id:7,title:'英语七班',isCheck:false}],
					reason:[{id:1,title:'课时',isCheck:true},
							{id:2,title:'天数',isCheck:false}],
					buke:[{id:'desc',title:'降序',isCheck:true},
							{id:'asc',title:'升序',isCheck:false}],
					num:100,
					dropdownZIndex:-1,
				},
				timePickerParams:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				listZIndex:100
			}
		},
		mounted() {
			setTimeout(()=>{
				this.quekeList.dropdownZIndex = 5
			},800)
			this.setPartLessHeight()
		},
		onShow() {
			this.init()
		},
		methods:{
			init(){
				this.list = []
				this.getYujinData()
			},
			getYujinData(){
				this.status = 'loading';
				let type = this.quekeList.reason.find(e=>e.isCheck).id
				let order = this.quekeList.buke.find(e=>e.isCheck).id
				let data = {
					type,
					order,
					page:this.page,
					limit:this.limit,
				}
				if(this.cxType == 1){
					data.keshi = this.quekeList.num
				}else{
					data.day = this.quekeList.num
				}
				if(this.keywords){
					data.search = this.keywords
				}
				request.go((e)=>{
					this.status = 'loadmore';
					if(e.data.list.length == 0){
						this.status = 'nomore'
					}else{
						this.list = this.list.concat(e.data.list)
					}
				},"/kecheng/renewWarn",data,"POST")
			},
			fsConfirm(){ //发送预警
				let data = {
					id:this.checkData.id,
					diff_num:this.checkData.diff_num,
					diff_day:this.checkData.diff_day,
					type:this.checkData.type,
					end_date:this.checkData.end_date,
					jw_student_id:this.checkData.jw_student_id
				}
				request.go((e)=>{
					uni.showToast({
						icon:"success",
						title:"提醒成功",
						duration:1000
					})
					this.init()
				},"/kecheng/sendMessage",data,"POST")
			},
			cancel(){ // 电话预警
				uni.makePhoneCall({
					phoneNumber:this.checkData.phone
				})
			},
			showModal(e){
				if(e.tz_time == null){
					this.checkData = e
					this.modal = true
				}
			},
			search(){
				this.list = []
				this.page = 1
				this.getYujinData()
			},
			setPartLessHeight(){
				const that = this
				uni.getSystemInfo({
					success(res) {
						let navbarHeight = parseInt(that.$refs.navbar.navbarHeight + that.$refs.navbar.statusBarHeight)
						let partLessHeight = parseInt(navbarHeight)
						// console.log(navbarHeight,partLessHeight)
						that.partLessHeight = partLessHeight*2
					}
				})
			},
			confirm(){
				this.list = []
				this.page = 1
				this.getYujinData()
				this.$refs.uDropdown.close()
			},
			reset(){
				let checkboxList = this.quekeList.checkboxList
				let reason = this.quekeList.reason
				let buke = this.quekeList.buke
				for(let i of checkboxList){
					i.isCheck = false
				}
				for(let i of reason){
					i.isCheck = false
				}
				for(let i of buke){
					i.isCheck = false
				}
				this.quekeList.classTimeMin=""
				this.quekeList.classTimeMax=""
			},
			checkboxHandle1(id,type){
				let checkboxList = this.quekeList.checkboxList
				let reason = this.quekeList.reason
				let buke = this.quekeList.buke
				switch(type){
					case 1:
						checkboxList.find(e=>e.id == id).isCheck = !checkboxList.find(e=>e.id == id).isCheck
					break;
					case 2:
						for(let i of reason){
							i.isCheck = false
						}
						reason.find(e=>e.id == id).isCheck = !reason.find(e=>e.id == id).isCheck
						this.cxType = reason.find(e=>e.id == id).id
					break;
					case 3:
						for(let i of buke){
							i.isCheck = false
						}
						buke.find(e=>e.id == id).isCheck = !buke.find(e=>e.id == id).isCheck
					break;
				}
			},
			dropdownOpen(){
				this.listZIndex = ""
			},
			dropdownClose(){
				setTimeout(()=>{
					this.listZIndex = 100
				},400)
			},
			setQinjia(type){
				switch(type){
					case 1:
						return {color:"#1661FF",title:"已通过"}
					break;
					case 2:
						return {color:"#FF9000",title:"已通过"}
					break;
					case 3:
						return {color:"#FF4D4F",title:"未通过"}
					break;
				}
			}
		},
		onReachBottom() {
			console.log("onReachBottom")
			// if(this.page >= 3) return ;
			if(this.status == "loadmore"){
				this.page = ++ this.page;
				this.getYujinData()
			}
		}
	}
</script>

<style scoped>
	.class{
		min-height: 100vh;
		background-color: #f7f8fa;
	}
	.class .part01{
		overflow: hidden;
	}
	.class .container .list{
		width: 686rpx;
		margin: 0 auto;
		overflow: hidden;
	}
	.class .container .list .title-time{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .container .list .item{
		position: relative;
		padding: 32rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		width: 100%;
		box-sizing: border-box;
		margin: 32rpx auto 0;
	}
	.class .container .list .item .title{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #1f2329;
		line-height: 44rpx;
		margin-bottom: 32rpx;
	}
	.class .container .list .item .p{
		margin-bottom: 16rpx;
		font-size: 28rpx;
	}
	.class .container .list .item .p:last-of-type{
		margin-bottom: 0;
	}
	.class .container .list .item .p text:nth-child(1){
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
		width: 134rpx;
		display: block;
		margin-right: 24rpx;
	}
	.class .container .list .item .p text:nth-child(2){
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
	}
	.class .container .list .item .rollcall{
		position: absolute;
		right: 32rpx;
		top: 122rpx;
		background-color: #1661FF;
		border-radius: 8rpx;
		width: 96rpx;
		height: 48rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
	}
	.class .container .list .item .already-rollcall{
		position: absolute;
		top: 36rpx;
		right: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 32rpx;
	}
	.class .part02{
		flex-wrap: nowrap !important;
	}
	.class .part02 .header{
		padding: 16rpx;
		margin-top: 2rpx;
		background-color: #FFFFFF;
		position: relative;
		height: 96rpx;
		box-sizing: border-box;
	}
	.class .part02 .search{
		width: 592rpx;
		z-index: 10;
	}
	.class .part02 .dropdown{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 16rpx;
	}
	.class .part02 .dropdown .dropdown-content{
		background-color: #FFFFFF;
	}
	.class .part02 .dropdown .dropdown-content .content{
		padding: 32rpx;
		box-sizing: border-box;
		max-height: 600rpx;
		/* overflow-y: auto; */
		overflow: hidden;
		margin-bottom: 32rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item{
		margin-bottom: 32rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 40rpx;
		margin-bottom: 32rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .checkbox .checkbox-item{
		width: 218rpx;
		height: 64rpx;
		background: #f7f8fa;
		border-radius: 8rpx;
		margin-right: 16rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		margin-bottom: 16rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .checkbox .checkbox-item.checkbox-item-active{
		color: #1661ff;
		background: #e6f2ff;
	}
	.class .part02 .dropdown .dropdown-content .content .item .checkbox .checkbox-item:nth-child(3n){
		margin-right: 0rpx;
	}
	.class .part02 .dropdown .dropdown-content .content .item .inputView{
		
	}
	.class .part02 .dropdown .dropdown-content .footer{
		border-top: 2rpx solid #ebedf0;
	}
	.class .part02 .dropdown .dropdown-content .footer .btn{
		width: 50%;
		height: 96rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: CENTER;
		line-height: 96rpx;
	}
	.class .part02 .dropdown .dropdown-content .footer .btn.btn1{
		color: #1f2329;
		background-color: #FFFFFF;
	}
	.class .part02 .dropdown .dropdown-content .footer .btn.btn2{
		color: #ffffff;
		background-color: #1661FF;
	}
	.class .part02 .filter text{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		margin-right: 10rpx;
	}
	.class .part02 .filter image{
		width: 32rpx;
		height: 32rpx;
	}
	.class .part02 .list .item .name{
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
		margin-bottom: 16rpx;
	}
	.class .part02 .list .item .title{
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 44rpx;
		margin-bottom: 16rpx;
	}
	.class .part02 .list .item .p text:nth-child(1){
		width: 148rpx;
		margin-right: 24rpx;
	}
	.class .part02 .list .item .status{
		position: absolute;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ff4d4f;
		line-height: 32rpx;
		top: 42rpx;
		right: 32rpx;
	}
	.class .part02 .list .item .line01 text{
		display: block;
		margin-bottom: 16rpx;
	}
	.class .part02 .list .item .line01 text:nth-child(1){
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 52rpx;
	}
	.class .part02 .list .item .line01 text:nth-child(2){
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 52rpx;
	}
	.class .part02 .list .item .line02 text{
		display: block;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 44rpx;
	}
	.class .footer2{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		z-index: 999;
	}
	.class .footer2 .btn{
		width: 622rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		margin: 24rpx auto 0;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
		z-index: 99;
		background-color: #1661FF;
	}
</style>
